<template>
	<m-layout title="记录" gap="30">
		<m-block gap="0 24">
			<template v-for="(item, index) in listArr">
				<view class="li">
					<view class="head flex-between">
						<text>兑换数量</text>
						<view class="flex">
							<text>{{ item.amtFrom }}</text>
							<text class="ml-4">{{ coinConfig[coinid]['coinname'] }}</text>
						</view>
					</view>
					<view class="flex-between ai-baseline">
						<text style="white-space: nowrap">获得数量：</text>
						<view class="flex">
							<text>{{ item.amtTo }}</text>
							<text class="ml-4">USDT</text>
						</view>
					</view>
					<view class="flex-between ai-baseline">
						<text style="white-space: nowrap">申请用户：</text>
						<view class="flex">
							<text>{{ item.nickname }}</text>
						</view>
					</view>
					<view class="flex-between">
						<text>时间：</text>
						<text>{{ item.ctime.replace('T', ' ') }}</text>
					</view>
					<view class="flex-between">
						<text>状态：</text>
						<text v-if="Number(item.state) == 2 || Number(item.state) == 3" class="text-red">
							{{ stateEun[item.state] }}
						</text>
						<text v-else>{{ stateEun[item.state] }}</text>
					</view>
					<view class="flex-column">
						<view class="flex-column pro1 mb-8">
							<view class="flex-between">
								<view class="flex">
									<text>营业厅审核状态：</text>
									<text v-if="item.pro1 == 0" class="text-red">待审核</text>
									<text v-if="item.pro1 == 1" class="text-grey">已审核</text>
									<text v-if="item.pro1 == 2" class="text-grey">已驳回</text>
								</view>
								<view class="verify" v-if="item.pro1 == 0 && [5].includes(Number(userinfo.dls))" @click="apply(item)">审核</view>
							</view>
							<view class="flex-between" v-if="item.pro1 !== 0">
								<text>审核时间：</text>
								<text>{{ item.proTime1.replace('T', ' ') }}</text>
							</view>
						</view>
						<!-- 	<view class="flex-column pro1 mb-8">
							<view class="flex-between">
								<view class="flex">
									<text>区县公司审核状态：</text>
									<text v-if="item.pro2 == 0" class="text-red">待审核</text>
									<text v-if="item.pro2 == 1" class="text-grey">已审核</text>
									<text v-if="item.pro2 == 2" class="text-grey">已驳回</text>
								</view>
								<view class="verify" v-if="item.pro2 == 0 && [4].includes(Number(userinfo.dls))" @click="apply(item)">审核</view>
							</view>
							<view class="flex-between" v-if="item.pro2 !== 0">
								<text>审核时间：</text>
								<text>{{ item.proTime2.replace('T', ' ') }}</text>
							</view>
						</view> -->
						<view class="flex-column pro1 mb-8">
							<view class="flex-between">
								<view class="flex">
									<text>平台审核状态：</text>
									<text v-if="item.pro3 == 0" class="text-red">待审核</text>
									<text v-if="item.pro3 == 1" class="text-grey">已审核</text>
									<text v-if="item.pro3 == 2" class="text-grey">已驳回</text>
								</view>
							</view>
							<view class="flex-between" v-if="item.pro3 !== 0">
								<text>审核时间：</text>
								<text>{{ item.proTime3.replace('T', ' ') }}</text>
							</view>
						</view>
						<view class="flex-between ai-baseline" v-if="item.remark">
							<text style="white-space: nowrap">驳回理由：</text>
							<text class="otp2">{{ item.remark }}</text>
						</view>
					</view>
				</view>
			</template>
		</m-block>
		<m-loading :list="listArr" :index="pageIndex" :total="pageCount" :loading="isLoading" />

		<m-dialog
			title="审核"
			:loading="btnLoading"
			:showCancel="true"
			:isShow="clearShow"
			@handleCancel="
				clearShow = false;
				btnLoading = false;
			"
			@handleConfirm="FruitReviewFn"
		>
			<view class="ptb-48 flex-column">
				<view class="flex-between ptb-12" @click="stateSelected = 1">
					<text class="fs26 fw-600" :class="[stateSelected == 1 ? 'text-red' : '']">通过</text>
					<view class="map-open-info">
						<m-icon size="42" :type="stateSelected == 1 ? 'icon-chenggong' : 'icon-weixuanzhongyuanquan'" />
					</view>
				</view>
				<view class="flex-between ptb-12" @click="stateSelected = 2">
					<text class="fs26 fw-600" :class="[stateSelected == 2 ? 'text-red' : '']">驳回</text>
					<view class="map-open-info">
						<m-icon size="42" :type="stateSelected == 2 ? 'icon-chenggong' : 'icon-weixuanzhongyuanquan'" />
					</view>
				</view>
				<view class="flex-column mt-24">
					<text class="fs26 fw-600">驳回理由</text>
					<m-block bgColor="#eeeeee" gap="12 24" class="mt-24" border="1rpx solid #DC2619">
						<view class="inputBox">
							<auto-wrap-input v-model="remark" :disabled="stateSelected == 1 ? true : false" placeholder="请输入理由" color="#333" />
						</view>
					</m-block>
				</view>
			</view>
		</m-dialog>
	</m-layout>
</template>

<script>
import { mapState } from 'vuex';
import { ExchangeDls, ExchangeReview } from '@/api/Activetion.js';
import AutoWrapInput from '@/components/AutoWrapInput/index.vue';
export default {
	components: { AutoWrapInput },
	data() {
		return {
			listArr: [],
			pageIndex: 1,
			pageSize: 10,
			pageCount: 1,
			isLoading: false,
			coinid: 4,
			stateEun: {
				1: '已完成',
				2: '待审核',
				3: '待处理',
				4: '驳回'
			},
			btnLoading: false,
			clearShow: false,
			stateSelected: '',
			remark: '',
			applyItem: null
		};
	},
	computed: {
		...mapState({
			coinConfig: (state) => state.general.coinConfig,
			userinfo: (state) => state.user.userinfo
		})
	},
	onLoad({ coinid }) {
		this.coinid = coinid || '1';
		this.getData();
	},
	methods: {
		apply(item) {
			this.clearShow = true;
			this.applyItem = item;
		},
		// 初始化
		reset() {
			this.pageCount = 1;
			this.pageIndex = 1;
			this.getData();
		},
		// 获取转让记录列表
		async getData() {
			if (this.pageIndex > this.pageCount) return;
			this.isLoading = true;
			const { list, pageCount, success } = await ExchangeDls({
				coinid_from:this.coinid,
				coinid_to:3,
				pageSize: this.pageSize,
				pageIndex: this.pageIndex
			});
			this.isLoading = false;
			this.pageCount = pageCount;
			if (this.pageIndex <= 1) {
				this.listArr = list;
			} else {
				this.listArr = [...this.listArr, ...list];
			}
			this.pageIndex++;
			uni.stopPullDownRefresh();
		},
		async FruitReviewFn() {
			if (!Number(this.stateSelected)) return;
			const { success, msg } = await ExchangeReview({
				id: this.applyItem.id,
				state: Number(this.stateSelected),
				remark: Number(this.stateSelected) == 1 ? '' : this.remark
			});
			this.Toast(msg);
			if (!success) return;
			this.stateSelected = '';
			this.remark = '';
			this.clearShow = false;
			this.Toast('操作成功');
			this.reset();
		}
	},
	onPullDownRefresh() {
		this.reset();
	},
	onReachBottom() {
		this.getData();
		console.log('触底了');
	}
};
</script>

<style lang="scss">
.li {
	padding: 27rpx 0;

	view + view {
		padding-top: 8rpx;
	}

	.head {
		text:nth-of-type(1) {
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		text:nth-of-type(2) {
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}

	text {
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #97979f;
	}
}

.li + .li {
	border-top: 1px solid #eeeeee;
}
.pro1 {
	padding: 20rpx;
	border-radius: 12rpx;
	background: #eeeeee;
}
.verify {
	background-color: var(--theme);
	padding: 12rpx 20rpx;
	border-radius: 12rpx;
	color: #fff;
	font-size: 24rpx;
}
</style>
